<template>
    <!-- 公共的删除抽屉 -->
    <!-- 入参可以自定义 标题 和 文字提示信息 -->
    <!-- 后期如果删除变得情况复杂，考虑使用插槽 -->
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" size="400px" :with-header="false" :close-on-click-modal="true">
        <template #default>
            <div class="delete-container">
                <el-icon class="zs-space-bottom-bg delete-icon">
                    <CircleCloseFilled />
                </el-icon>
                <div class="zs-title-bg zs-space-bottom-bg">{{ delTitle }}</div>
                <div class="zs-text-gray delete-des">{{ delTipMes }}</div>
                <div class="delete-footer">
                    <el-button class="zs-btn-md zs-btn-plain" @click="cancelClick">保留</el-button>
                    <el-button class="zs-btn-md zs-btn-primary" @click="deleteClick">删除</el-button>
                </div>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref,   watch } from 'vue'
// import { useStore } from 'vuex'
// let store = useStore()
// const curDrawerSize = ref(store.state.uiDrawerSize)

const props = defineProps({
    isShow: { type: Boolean, default: false },
    delTitle: { type: String, default: '是否删除' },
    delTipMes: { type: String, default: '点击”删除“后,结果无法复原,是否删除?' },
})
const emit = defineEmits(['close'])

console.log(props.isShow)

const isShowDrawer = ref(props.isShow)

watch(
    () => props.isShow,
    (newVal, oldVal) => {
        console.log('new', newVal)
        console.log('old', oldVal)
        isShowDrawer.value = newVal
    }
)

const handleClose = (done) => {
    emit('close', { isShow: false, isDelete: false })
    done()
}
function cancelClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false, isDelete: false })
}
function deleteClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false, isDelete: true })
}

</script>

<style scoped lang="scss">
.delete-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.delete-des {
    max-width: 300px;
    line-height: 22px;
}

.delete-icon {
    font-size: 70px;
    color: #FF1A2E;
}

.delete-footer {
    margin-top: 70px;
    margin-bottom: 120px;
}
</style>
